<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>类别</span>
      </div>
    </template>
    <div class="text item" v-for="item in labelList" :key="item.id" @click="handleRouter(item.labelName)">
      <el-icon :size="20" class="itemLight">
        <Opportunity />
      </el-icon> &emsp;
      <div class="label">
        <span> {{ item.labelName }}</span>
        <span>文章数 ({{ item.articleCount }})</span>
      </div>
    </div>
  </el-card>
</template>
<script>
import { reactive, toRefs } from 'vue'
import http from '@/utils/http'
import { useRouter } from 'vue-router'
export default {
  name: 'HomeClassify',
  setup (props) {
    const router = useRouter()
    const data = reactive({
      labelList: []
    })
    http.get('/article/label').then(res => {
      data.labelList = res.data.info.filter(item => item.labelName != '草稿')
    })
    function handleRouter (labelName) {
      console.log(labelName);
      router.push(`/home/classifydetalis/${labelName}`)
    }
    return {
      ...toRefs(data),
      handleRouter
    }
  }
}
</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: #777;
  font-weight: 900;
}

.item {
  display: flex;
  padding-top: 18px;
  color: #777;
  font-size: 16px;
  align-items: center;
  padding-bottom: 5px;
  border-bottom: 1px dashed #ddd;
  cursor: pointer;

  .label {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    span:nth-child(2) {
      font-size: 12px;
      color: #888;
      margin-right: 40px;
    }
  }

  &:hover .itemLight {
    color: red;
  }
}

.box-card {
  max-width: 1200px;
  margin: auto;
  padding: 40px 50px;
  min-height: 500px;
  margin-top: -50px;
}

.itemLight {
  color: #49b1f5;
}</style>